<template>
  <div class="main">
    <div class="top">

      <div class="t1">
        <div>
          <img class="img1"
               :src='"https://elm.cangdu.org/img/"+list.image_path'
               alt="">
        </div>
        <div class="ti_text">
          <h3>{{list.name}}</h3>
          <div class="_center">
            商家配送／分钟送达／配送费¥{{list.float_delivery_fee}}
          </div>

          <div class="_bottom">公告:{{list.promotion_info}}</div>
        </div>

      </div>

      <div class="t2">
        <span class="jian1"
              v-if="list.activities[0].icon_name && list.activities[0].icon_name.length > 0">{{list.activities[0].icon_name}}</span>
        <span class="msg">{{list.activities[0].description}}（APP专享）</span>
      </div>
    </div>

    <div class="mid">
      <ul class="ul_1">
        <li :class="{'select':sele == index}"
            @click="btn(index)"
            v-for="(item,index) in datas"
            :key="index">{{datas[index].name}}</li>
      </ul>
    </div>
    <div class="view">
      <router-view></router-view>
    </div>
    <!-- 局部刷新 -->

    <div class="bg">
      <img class="img2"
           :src='"https://elm.cangdu.org/img/"+list.image_path'
           alt="">
    </div>

   
  </div>
</template>

<script>


export default {
  name: 'Shop',

  data () {
    return {
      shopid: JSON.parse(localStorage.getItem("shuju")),
      list: [],
      show: false,
      sele: 0,
      activeKey: 0,
      datas: [{
        name: '商品'
      }, {
        name: '评价'
      }]
    }
  },
  methods: {
    fors (index) {
      alert(index)
    },
    left (index) {
      alert(index)
    },
    btn (index) {
      this.sele = index
      if (index == 0) {
        this.$router.push({ name: 'Shangpin' })

      } else if (index == 1) {
        this.$router.push({ name: 'Evaluate' })

      }
    },

  },
  created () {
    this.$axios.get(`https://elm.cangdu.org/shopping/restaurant/${this.shopid}`, {

    }).then(res => {
      // console.log(res)
      // console.log('//////')
      // 获取对应的数据
      this.list = res
     localStorage.setItem('img',JSON.stringify(this.list))
      localStorage.setItem('tip',res.piecewise_agent_fee.tips)
    })

  }
}
</script>
<style lang="less" scoped>
.view {
  overflow: hidden;
}
.b_r {
  height: 100%;
}

.for {
  display: flex;
}
.title {
  height: 55.7px;
  width: 333.6px;
  background-color: #f5f5f5;
  color: #666;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
  padding: 15px 10px;
}
.bott {
  display: flex;
}

.van-sidebar-item--select::before {
  height: 100% !important;
  background-color: #3190e8 !important;
}
.list {
  width: 98px;
  height: 72px;
}
.select {
  border-bottom: 4px solid #3190e8;
  // padding-bottom: 5px;
  // box-sizing: border-box;
}

.ul_1 {
  display: flex;
  text-align: center;
  box-sizing: border-box;
  padding-top: 15px;
  justify-content: space-around;
}

.mid {
  width: 100%;
  height: 59.2px;
  font-size: 17px;
  background-color: white;
  // position: fixed;
  // top: 175px;
  z-index: 100;
}
.top {
  z-index: 100;
  padding: 10px;
  background-color: rgba(119, 103, 137, 0.43);

  .t1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    img {
      width: 75px;

      border-radius: 0.15rem;
    }
    .ti_text {
      width: 320px;
      margin-left: 10px;
      h3 {
        color: #fff;
        font-weight: 700;
        margin-bottom: 0.3rem;
      }
      ._center {
        font-size: 0.5rem;
        color: #fff;
        margin-bottom: 0.3rem;
      }
      ._bottom {
        font-size: 0.5rem;
        color: #fff;
        width: 100%;
        overflow: scroll;
      }
    }
  }
  .t2 {
    box-sizing: border-box;
    padding: 5px 0;
    .jian1 {
      background-color: rgb(240, 115, 115);
      border-color: rgb(240, 115, 115);
      font-size: 0.8rem;
    }
    .msg {
      color: #fff;
      font-size: 0.5rem;
    }
  }
}

.img2 {
  width: 100%;
  height: 414px;
  position: fixed;
  top: 64px;
  left: 0;
  filter: blur(10px);
  z-index: -9;
}

</style>